<template>
<d2-container>
  <el-card class="carousel" shadow="never">
    <el-form :inline="true" :model="queryData" class="demo-form-inline">
       <el-form-item label="活动">
        <el-select v-model="queryData.aid" filterable>
          <el-option label="全部" value="" />
          <el-option v-for="item in activity" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="到账状态">
        <el-select v-model="queryData.state">
          <el-option label="全部" value="" />
          <el-option label="到账成功" value="1" />
          <el-option label="到账失败" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="UID">
        <el-input v-model="queryData.uid" placeholder="请输入UID"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :loading="tableLoading" @click="queryHandler">查询</el-button>
        <el-button type="primary" @click="daocbtn">导出中奖数据</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="tableLoading" :data="tableData" stripe>
      <el-table-column type="index" label="编号" width="50" />
      <el-table-column label="活动">
        <template slot-scope="{ row }">
          <div> {{ getBackName(row) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="uid" label="UID" />
      <el-table-column prop="username" label="用户名" />
      
       <el-table-column prop="headimgurl" label="头像">
        <template slot-scope="{ row }">
          <el-image
            v-if="row.headimgurl"
            style="width: 50px; height: 50px"
            :src="row.headimgurl"
            :preview-src-list="[row.headimgurl]"
          />
          <span v-else>暂无图片</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号码" />
      <el-table-column prop="voice_url" label="语音地址" />
      <el-table-column prop="money" label="金额(元)" />
      <el-table-column prop="sync" label="到账方式" />
      <el-table-column prop="state" label="到账状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === 2" type="warning">到账失败</el-tag>
          <el-tag v-else type="success">到账成功</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="money_reason" label="到账失败原因" />
      <el-table-column prop="dateline" label="添加时间" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popconfirm
            :title="`您确定要补发？`"
            @onConfirm="toggleHandler(scope.row)"
          >
            <el-button v-show="scope.row.state === 2" slot="reference" type="text" size="small">补发</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="pagination.total" :page-size="pagination.pageSize" @current-change="changeHandler" />
  </el-card>
  </d2-container>
</template>

<script>
import { crudOptions } from './crud' // 上文的crudOptions配置
import { d2CrudPlus } from '@/components/d2-crud-plus'
import { getLists, reissue, downloadData } from '@/api/page' // 查询添加修改删除的http请求接口
export default {
  name: 'Winner',
  mixins: [d2CrudPlus.crud], // 最核心部分，继承d2CrudPlus.crud
  data () {
    return {
      queryData: {
        state: '',
        aid: '',
        uid: ''
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      tableLoading: false,
      activity: []
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions
    },
    doRefresh () {
      this._getTableData()
    }, // 数据请求
    _getTableData () {
      const { pagination, queryData } = this
      const { state, aid, uid } = queryData
      this.tableLoading = true
      getLists(pagination.currentPage, aid, uid, state).then(res => {
        const { list = [], pagination, activity } = res || {}
        this.tableData = list
        pagination && (this.pagination = pagination)
        activity && (this.activity = activity)
      }).finally(() => {
        this.tableLoading = false
      })
    },
    changeHandler (current) {
      this.pagination.currentPage = current
      this._getTableData()
    },
    queryHandler () {
      this.pagination.currentPage = 1
      this._getTableData()
    },
    toggleHandler ({ id }) {
      reissue(id).then(res => {
        this._getTableData()
      }).finally(() => {
        this.submitLoading = false
      })
    },
    daocbtn () {
      const { aid, state } = this.queryData
      if (aid) {
        downloadData(aid, state).then(res => {
          // window.location.hash = res
        }).finally(() => {
          this.tableLoading = false
        })
      }else {
        this.$message.error('请选择活动')
      }
    },
    getBackName ({ aid }) {
      const name = this.activity.find(item => item.id === parseInt(aid)).title
      if (!name) {
        name = ''
      }
      return name
    }
  }
}
</script>
<style>
.imgbox{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    vertical-align: top;
}
.el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width:60px;
    height: 60px;
    margin: 0 8px 8px 0;
    display: inline-block;
    box-sizing:border-box
}
.imgitem{
  margin-right: 10px;
  display: inline-block;
  width: 60px;
  height: 60px;
  background-size: cover;
}
.logimg{
  width: 160px;
  height: 160px;
  background-size: cover;
}
.qubox{
  display: flex;
  align-items: center;
  margin-top: -7px;
}
.delsty{
  margin-top: 10px;
  font-size: 30px;
  color: #f56c6c;
}
.addsty{
  margin-top: 10px;
  font-size: 30px;
  color: #409eff;
}
</style>
